<script lang="ts" setup>
import { ref, reactive } from "vue";
import managerServiceApi from "@/api/modules/org/bean/manager";
import { SYSTEM_CONFIG } from "@/config/system";
const emit = defineEmits<{
  (e: "change", val: any): void;
}>();

const props = defineProps({
  userDeptId: {
    type: String,
    default: ""
  }
});

const UserRoleListTableRef = ref();
const UserRoleTableState = reactive({
  /**查询参数 */
  queryparam: {
    appId: SYSTEM_CONFIG.APP_ID,
    userDeptId: props.userDeptId,
    filterQuery: true
  },

  /**
   * 表格的列配置
   */
  tableColumn: [
    { prop: "roleName", label: "角色名称", align: "center" },
    { prop: "roleDesc", label: "描述", align: "center" },
    {
      label: "是否拥有该角色",
      width: "120",
      align: "center",
      slot: "customCheckOut"
    }
  ],
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) =>
    managerServiceApi.fetchRoleList(null, {
      ...params,
      ...UserRoleTableState.queryparam
    }),
  /**
   * 表格选中事件
   */
  handelCheckChange: (row: any, val: any) => {
    console.log("val", val);
    emit("change", { roleId: row.roleId, status: val });
  }
});

defineExpose({
  getUserRoleListTableRef: () => UserRoleListTableRef.value
});
</script>
<template>
  <JxtechBaseTable
    ref="UserRoleListTableRef"
    row-key="roleId"
    :table-column="UserRoleTableState.tableColumn"
    :load-data="UserRoleTableState.loadData"
  >
    <template #customCheckOut="{ row }">
      <el-checkbox
        v-model="row.active"
        true-label="1"
        false-label="0"
        @change="UserRoleTableState.handelCheckChange(row, $event)"
      ></el-checkbox>
    </template>
  </JxtechBaseTable>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
</style>
